<template>
	<view class="">
		<view class="web_show">
			<view @click="item_click(item)" class=" pharmacy_cell_web">
				<image class="img" mode="aspectFit" :src="item.coverImage">

				</image>
				<view class="line"></view>
				<view class="text">{{item.commonName}}</view>
				<view class="text">{{item.englishName}}</view>

			</view>
		</view>
		<view class="h5_show">
			<view class=" pharmacy_cell_h5" @click="item_click(item)">
				<image class="img" :src="item.coverImage" mode="aspectFill"></image>
				<view class="cell_info">
					<view class="title">
						{{item.productName}}
						<!-- <text class="sub">{{product.commonName}}</text> -->
					</view>
					<view> {{item.commonName}} </view>
					<view> {{item.englishName}} </view>

					<view v-for="tag in item.targetList" class="tag">
						{{tag.targetName}}
					</view>
				</view>
			</view>
		</view>
		<view class="cell_space"></view>
	</view>
</template>

<script>
	export default {
		name: "pharmacy-cell",
		props: {
			item: {
				type: Object,
				default: {},
				required: true,
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" >
	
	.pharmacy_cell_web {
		// padding: 40rpx;
		margin-bottom: 120rpx;
		width: 267rpx;
		// height: 326rpx;
		border: 2rpx solid #D8D8D8;

		.img {
			width: 267rpx;
			height: 200rpx;
			// background-color: #C0C0C0;
		}

		.line {
			background-color: #70B8B5;
			height: 2rpx;
			margin: 0 40rpx;

		}

		.text {
			margin-top: 20rpx;
			text-align: center;
			word-wrap: break-word;

			font-size: 18rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 40rpx;
		}
	}

	.pharmacy_cell_h5 {
		margin-left: 22rpx;
		display: flex;
		height: 216rpx;
		align-items: center;

		border-bottom-style: solid;
		border-bottom-width: 2rpx;
		border-bottom-color: #F6F6F6;

		.img {
			flex-shrink: 0;
			width: 240rpx;
			height: 150rpx;
			background-color: #F0F0F0;
		}

		.cell_info {
			margin-left: 22rpx;

			.title {

				font-size: 32rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 50rpx;

				.sub {
					margin-left: 12rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #999999;
					line-height: 40rpx;
				}
			}
		}

	}

	.cell_space {
		// min-width: 50rpx;
		flex-grow: 0;
		width: calc((100% - 267rpx * 4) / 3);
	}
</style>
